<template>
  <a-modal
    title="账单计划"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    class="model-yz"
    @cancel="handleCancel"
    :footer="[]"
  >
    <a-spin :spinning="confirmLoading">
       <a-table
              size="middle"
              :columns="columns"
              :dataSource="data"
              :pagination="false"
              :rowKey="(record) => record.id"
              :loading="memberLoading">
               <template slot="rentStartDate" slot-scope="text, record">
                {{ text }}-{{ record.rentEndDate }}
              </template>
              <template slot="rent" slot-scope="text, record">
                {{ text }}{{ record.zremark }}
              </template>
              <template slot="operation" slot-scope="text, record">
                <a v-if="record.editFlag === 1" @click="$refs.editBillPlan.edit(record.id)">修改</a>
                <span v-else>已到账</span>
              </template>
          </a-table>
    </a-spin>
    <edit-bill-plan ref="editBillPlan" @ok="handleOk" />
  </a-modal>
</template>

<script>
  import moment from 'moment'
  import { getBillPlan } from '@/api/modular/main/ownerleasebill/ownerLeaseBillManage'
  import editBillPlan from './editBillPlan.vue'
  export default {
    components: {
      editBillPlan
    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        data: [],
        visible: false,
        confirmLoading: false,
        memberLoading: false,
        id: 0,
        columns: [
          {
            title: '期數',
            dataIndex: 'qsNum',
            width: '10%'
          },
          {
            title: '收租日',
            dataIndex: 'rentedDay',
            width: '20%'
          },
          {
            title: '賬單週期',
            dataIndex: 'rentStartDate',
            width: '20%',
            scopedSlots: { customRender: 'rentStartDate' }
          },
          {
            title: '時長',
            dataIndex: 'sc',
            width: '15%'
          },
          {
            title: '租金',
            dataIndex: 'rent',
            width: '20%',
            scopedSlots: { customRender: 'rent' }
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'operation' }
          }
        ]
      }
    },
    methods: {
      moment,
      // 初始化方法
      edit (id) {
        this.id = id
        this.ownerLeasePlan(id)
        this.visible = true
      },
      ownerLeasePlan (id) {
        getBillPlan(id).then((res) => {
          if (res.code === 200) {
            this.data = res.data
          } else {
            this.$message.error(res.msg) // + res.message
          }
        })
      },
      handleOk() {
        this.ownerLeasePlan(this.id)
      },
      handleCancel () {
        this.data = []
        this.id = 0
        this.visible = false
      }
    }
  }
</script>
<style lang="less" scoped>
.model-yz  /deep/ .ant-modal-content{
    height: 1000px;
    overflow-y:scroll;
    overflow-x: hidden;
}
.model-yz  /deep/ .ant-modal-content::-webkit-scrollbar {
  width: 4px;
}
.model-yz  /deep/ .ant-modal-content::-webkit-scrollbar-track {
 background-color:rgb(250, 241, 241);
}
.model-yz  /deep/ .ant-modal-content::-webkit-scrollbar-thumb {
 background-color:rgb(205, 209, 205);
}
</style>
